@import '../../styles/variables.scss';

.container {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 20rpx 36rpx;
  background: linear-gradient(180deg, $background-gradient-start 0%, $background-gradient-end 100%);
  
  .nav-placeholder {
    height: $nav-height;
  }
  
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    height: $nav-height;
    margin-top: 8rpx;
    padding: 20rpx 0;
    
    &-title {
      line-height: 32rpx;
      font-size: 32rpx;
      font-weight: 500;
    }
    
    &-back {
      image {
        position: absolute;
        height: 48rpx;
        width: 48rpx;
        top: 115rpx;
        left: 12rpx;
      }
    }
  }
  
  .input-container {
    margin-top: 24rpx;
    width: 100%;
    
    textarea {
      padding: 28rpx;
      width: 100%;
      height: 396rpx;
      opacity: 1;
      border-radius: 20rpx;
      background: $white;
      border: $border-width solid $border-color;
      font-family: inherit; // 保持字体一致
      resize: none;
      
      &::placeholder {
        text-align: left;
        vertical-align: top;
      }
    }
  }
  
  .selected-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 28rpx;
    margin-top: 28rpx;
    width: 100%;
    
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 28rpx;
      width: 100%;
      height: 116rpx;
      border-radius: 26rpx;
      background: $white;
      border: $border-width solid $border-color;
    }
  }
  
  .selected-type {
    text {
      font-size: 32rpx;
      font-weight: 400;
    }
    
    &-option {
      display: flex;
      align-items: center;
      justify-content: end;
      
      text {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(56, 56, 56, 1);
      }
      
      image {
        margin-left: 10rpx;
        height: 40rpx;
        width: 40rpx;
      }
    }
  }
  
  .add-timing-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80rpx;
    
    .add-timing-button-text {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 632rpx;
      height: 96rpx;
      border-radius: 135.72rpx;
      background: $primary-color;
      border: $border-width solid $border-color;
      font-size: 32rpx;
      font-weight: 400;
    }
  }
  
  .background {
    margin-top: 10rpx;
    width: 288rpx;
    height: 310rpx;
    opacity: 0.1;
  }
}